<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线书城-全世界最大书城-注册</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/commons.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2466032_1guctssow9r.css">
    <script src="js/jquery.min.js"></script>
    <style>
        .index:hover{
            color: red;
        }
        .classify:hover{
            color: red;
        }
        .hotpro{
            margin-top:75px;
        }
        .main p{
            display: inline;
            font-family: Marlett;
            font-weight: bold;
            font-size: 20px;
            text-align: center;
        }
        .main a:hover{
            color: red;
        }
        .main label{
            display: inline-block;
            text-align: right;
            width: 300px;
            margin-left: 280px;
        }
        .main button{
            padding: 2px;
            font-size: 15px;
            font-weight: bold;
            color: white;
            text-align: center;
            width: 70px;
            background-color: #FF7F50;
        }
        .main input{
            padding: 4px;
        }
        .main p:nth-of-type(4){
            left: 10px;
        }
        .main input:nth-of-type(5){
        }
    </style>
</head>
<body>
<!-- 头部开始 -->
<div class="header flux clearfix">
    <div class="container">
        <h1 class="logo l">
            <img src="./images/logo.jpeg" alt="">
        </h1>
        <ul class="shortcut">
            <li>
                <img src="./images/addr.png" alt="">
                北京
                <img src="./images/xia.png" alt="">
            </li>
            <li onclick="window.location.href='index.html'" class="index">首页</li>
            <li class="classify" onclick="location.href='classify.html'">分类</li>
            <li>
                <img src="./images/search.png" alt="">
                <input id="text_search" type="text" placeholder="搜索图书、课堂、文艺类">
                <button id="btn_search">搜索</button>
                <script>
                    $("#btn_search").click(function () {
                        let name=$("#text_search").val();
                        sessionStorage.setItem("name",name);
                        window.location.href="search.html";
                    })
                </script>
            </li>
            <li>
                <img src="./images/user.png" alt="">
                <span  id="toLogin" onclick="window.location.href='login.html'">登录</span>
            </li>
            <li>
                <img src="./images/phone.png" alt="">
                <span id="register" onclick="location.href='regist.html'">注册</span>
            </li>
            <li>
                <div class="shopcart" onclick="window.location.href='./shopcart.html'">
                    <i class="iconfont icon-gouwuche" style="font-size:20px"></i>
                    <span>购物车</span>
                    <span id="shopNum"></span>
                </div>
            </li>
        </ul>
    </div>
</div>
<!-- 头部结束 -->

<!-- 注册开始 -->
<div class="hotpro container">
    <div class="title clearfix">
        <div class="first-title l">商</div>
        <div class="second-title l">品结算</div>
    </div>
    <div class="main">
        <table id="goodsList" border="1px;" style="border-collapse: collapse;text-align: center;width: 100%">
            <tr class="title">
                <th>图片</th>
                <th>商品名称</th>
                <th>数量</th>
                <th>单价</th>
                <th>小计</th>
            </tr>
        </table>
        <h3 class="title" style="width: 100%;font-size: 15px;text-align: right;border: 1px solid black">总价格:<span  id="prices" style="color: red">￥999</span></h3>
        <div>
            <h3 class="title" style="margin-top: 30px;padding-left: 60px;border: 1px solid black">选择收货地址<a href="address.html" style="font-size: 15px;line-height: 2">没有地址?去添加/修改</a></h3>
            <table id="address" border="1px" style="border-collapse: collapse;text-align: center;width: 100%;border-collapse: collapse">
                <tr>
                    <th>选择</th>
                    <th>收件人</th>
                    <th>电话号码</th>
                    <th>地址信息</th>
                </tr>
            </table>
        </div>
        <button onclick="toPay()" style="width: 100%;text-align: center;margin-top: 15px">去支付</button>
    </div>

</div>
<!-- 注册结束 -->


<!-- 底部栏开始 -->
<div class="footer flux">
    <div class="f1 container">
        <ul>
            <li>
                <div class="tb1"></div>
                <div class="tbc">品类齐全，轻松购物</div>
            </li>
            <li>
                <div class="tb2"></div>
                <div class="tbc">多仓直发，极速配送</div>
            </li>
            <li>
                <div class="tb3"></div>
                <div class="tbc">正品行货，精致服务</div>
            </li>
            <li>
                <div class="tb4"></div>
                <div class="tbc">天天低价，畅选无忧</div>
            </li>
        </ul>
    </div>
    <div class="operator"></div>
    <div class="f2 container">
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="f3 container">
        <span>关于我们</span><span>|</span>
        <span>联系我们</span><span>|</span>
        <span>联系客服</span><span>|</span>
        <span>合作招商</span><span>|</span>
        <span>商家帮助</span><span>|</span>
        <span>营销中心</span><span>|</span>
        <span>English Site</span><span>|</span>
        <span>Media & IR</span>
    </div>
    <div class="f4 container">
        <span>Copyright &copy; 2020 - 2021  乐山LS.com 版权所有</span>
        <span>|</span>
        <span>消费者维权热线：4006067733经营证照</span>
        <span>|</span>
        <span>(川)网械平台备字(2020)第00004号</span>
        <span>|</span>
        <span>营业执照</span>
    </div>
</div>
<!-- 底部栏结束 -->
</body>
<script>
    let ids=window.location.href.split("=")[1];
    let addressId;
    let totalPrice=0.0;
    $.ajax({
        url: "cart/queryIds",
        type: "get",
        datatype: "json",
        data: {
            "ids": ids,
        },
        success: function (res) {
            for (let item of res.data) {
                let imag_td = $("<td></td>");
                let imag = $("<img width='50px' hegith='50px'>").prop("src", item.goods.image);
                imag_td.append(imag);

                let name_td = $("<td width='40%'></td>").text(item.goods.name);
                let nums_td = $("<td></td>").text(item.nums);
                let price_td = $("<td></td>").text("￥" + item.goods.salesprice);
                let prices = (item.nums * item.goods.salesprice).toFixed(1);
                totalPrice=totalPrice+parseFloat((item.nums * item.goods.salesprice).toFixed(1));
                let prices_td = $("<td></td>").text("￥" + prices);
                let tr = $("<tr></tr>");
                tr.append(imag_td);
                tr.append(name_td);
                tr.append(nums_td);
                tr.append(price_td);
                tr.append(prices_td);
                $("#goodsList").append(tr);
            }
            $("#prices").text("￥"+totalPrice);
        }
    });

    $.ajax({
        url:"address/byId",
        type:"get",
        datatype:"json",
        data:{
            "uid":sessionStorage.getItem("userid"),
        },
        success:function (res) {
            // console.log(res);
            if(res.code==500){
                alert("你还没有地址信息,请先添加");
            }else{
                for(let item of res.data){
                    let tr=$("<tr></tr>");
                    let td_check=$("<td></td>");
                    let check=$("<input id='checkbox_"+item.id+"' onclick='checkboxMes(this)' class='addressBox' type='checkbox' style='text-align: center;margin-top: 4px" + "'/>");
                    td_check.append(check);
                    let td_name=$("<td id='nam_"+item.id+"'></td>").text(item.accept);
                    let td_telpone=$("<td id='tel_"+item.id+"'></td>").text(item.telphone);
                    let td_address=$("<td id='ads_"+item.id+"'></td>").text(item.province+item.city+item.area+item.address);
                    tr.append(check,td_name,td_telpone,td_address);
                    $("#address").append(tr);
                }
            }
        }
    });

    function checkboxMes(obj) {
        let id=$(obj).attr("id").split("_")[1];
        addressId=id;
        let checkboxAddress=$("#checkbox_"+id);
        let checkboxs=$(".addressBox");
        checkboxs.prop("checked",false);
        checkboxAddress.prop("checked",true);
    }

    function toPay() {
        let name=$("#nam_"+addressId).text();
        let telphone=$("#tel_"+addressId).text();
        let address=$("#ads_"+addressId).text();
        $.ajax({
            url:"order/makeOrder",
            type:"get",
            datatype:"json",
            data:{
                "ids":ids,
                "accept":name,
                "telphone":telphone,
                "address":address,
                "money":totalPrice,
            },
            success:function (res) {
                location.href="pay.html";
                let data=JSON.stringify(res.data);
                sessionStorage.setItem("ordercdto",data);
            }
        })

    }
</script>
<script src="js/toLogin.js"></script>
</html>